import React, { useEffect, useRef, useState } from 'react'
import { NavLink, useRoutes, useLocation, useParams, useSearchParams, useNavigate } from 'react-router-dom'
import homecss from './home.module.css'
import { Button } from 'antd';
import { CheckCircleTwoTone, HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
import loadingimg from '@/static/loading.gif'
const Homeview = (props) => {
    const { state } = useLocation()
    const params = useParams()
    const navigate = useNavigate()
    const [imgshow, setimgshow] = useState(false)
    const banner = useRef(null) 
    const imgref = useRef(null) 
    const preconer = useRef(null) 
    const imgview = useRef(null) 
    setTimeout(() => {
        startimg();
    }, 2000);
    function startimg() {
        setimgshow(true)
        var oDiv = banner.current;
        var oUl = oDiv.getElementsByTagName('ul')[0];
        var Li = oUl.getElementsByTagName('li');
        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
        oUl.style.width = Li[0].offsetWidth * Li.length + 'px';
        var speed = 2
        function move() {
            if (oUl.offsetLeft < -oUl.offsetWidth / speed) {
                oUl.style.left = '0'
            }
            if (oUl.offsetLeft > 0) {
                oUl.style.left = -oUl.offsetWidth / speed + 'px';
            }
            oUl.style.left = oUl.offsetLeft + speed + 'px';
        }
        var timer = setInterval(move, 130)
        oDiv.onmouseover = function () {
            clearInterval(timer);
        }
        oDiv.onmouseout = function () {
            timer = setInterval(move, 30)
        }
        oDiv.onclick = function (e) {
            var lis = imgref.current;
            var img = lis;
            let container = preconer.current;
            container.onclick = function () {
                container.remove()
            }
            container.style.display = "block";
            let innerImg = imgview.current;
            innerImg.src = img.src
            container.append(innerImg)
            document.body.append(container)
        }
    }
    function imgclick() {
    }
    function Loadingimg() {
        return <img className={homecss.loadingbox} src={require('@/static/loading.gif')} alt="" />
    }
    return (
        <div className={homecss.loactionbox}>
            <div className={homecss.content} >
                <div className={homecss.content21}>
                    <div className={homecss.content2}>
                        <h3>简介</h3>
                        <h4 onClick={() => {
                            navigate('/homeinfo/busintrod', {
                                replace: false,
                                state: {
                                    name: '简介'
                                }
                            })
                        }}>>>更多</h4>
                    </div>
                    <div className={homecss.newinfo}>
                    车祸预警系统是一款依托大数据技术的应用程序，旨在通过提前提醒用户，帮助用户避免车祸的发生。该系统利用卫星传输的数据，在公路上检索和分析车祸情况，并向距离车祸现场200-2000米范围内的所有同向车道内的司机发出提醒，提醒他们注意减速慢行。
车祸预警系统的初衷是为了避免新闻上出现的连环车祸，提高道路交通安全水平。它的功能还包括提醒方式和时间、车祸预警范围、规划合理路线等。此外，车祸预警系统还可以考虑小车和大车的车速，并根据雨天、冰雹、下雪的情况进行提醒，以及提醒用户开启近远光灯和雾灯，防止连环车祸的发生。我们团队研发的车祸预警系统是一款为用户的出行保驾护航的安全工具。它可以提前侦测用户前方可能发生车祸的情况，提前给予用户预警，并且给出合理的路线规划，帮助用户避开危险。此外，车祸预警系统还可以考虑小车和大车的车速，根据天气情况进行提醒，帮助用户更好地看清前方路况，从而防止车祸的发生。
车祸预警系统的目标用户是长途司机、大车司机等。它可以通过多种推广渠道，如网络营销、电视广告、报纸广告等，向更多人宣传车祸预警系统的功能和优势等。向更多人宣传车祸预警系统的功能和优势。还可以与道路管理部门合作，为用户提供有关交通事故情况的信息，使用户面对交通事故时有更好的应对方法。车祸预警系统是一款专门针对汽车用户的安全工具，所以可以售卖与汽车相关的产品。此外，车祸预警系统还可以考虑与汽车保险公司合作，为用户提供保险服务。这样可以帮助用户更好地保障自己的财产安全，并为用户提供更多的保障。
                    </div>
                    <div className={homecss.content2}>
                        <h3>新闻动态</h3>
                        <h4 onClick={() => {
                            navigate('/homeinfo/NewsCenter', {
                                replace: false,
                                state: {
                                    name: '新闻动态'
                                }
                            })
                        }}>>>更多</h4>
                    </div>
                    <div className={homecss.newinfo1}>
                        <div className={homecss.infoloca}>
                            <span className={homecss.infolocabox1}>
                            西安蓝田7死1伤交通事故报告公布，建议追责20人
                            </span>
                            <span className={homecss.infolocabox2}>
                                [2023/01/11]
                            </span>
                        </div>
                        <div className={homecss.infoloca}>
                            <span className={homecss.infolocabox1}>
                            广东高速公路发生一起车祸 已致8人死亡 
                            </span>
                            <span className={homecss.infolocabox2}>
                                [2023/03/10]
                            </span>
                        </div>
                        <div className={homecss.infoloca}>
                            <span className={homecss.infolocabox1}>
                            媒体：一年内至少6名机车网红车祸身亡，致命狂飙该刹车了
                            </span>
                            <span className={homecss.infolocabox2}>
                                [2023/01/10]
                            </span>
                        </div>
                        <div className={homecss.infoloca}>
                            <span className={homecss.infolocabox1}>
                            车祸致1死4伤!西昌公安最新警情通报
                            </span>
                            <span className={homecss.infolocabox2}>
                                [2023/11/10]
                            </span>
                        </div>
                        <div className={homecss.infoloca}>
                            <span className={homecss.infolocabox1}>
                            广东车祸致8亡43伤
                            </span>
                            <span className={homecss.infolocabox2}>
                                [2023/11/11]
                            </span>
                        </div>
                    </div>
                </div>
                <div  className={homecss.content13}>
                    <div className={homecss.content1}>联系我们</div>
                    <div className={homecss.content131}>地址:广东省</div>
                    <div className={homecss.content131}>电话: 020-87907168</div>
                    <div className={homecss.content131}>传真: 020-32322</div>
                    <div className={homecss.content131}>邮编: 322322</div>
                    <div className={homecss.content132} onClick={() => {
                            navigate('/homeinfo/Connectus', {
                                replace: false,
                                state: {
                                    name: '联系我们'
                                }
                            })
                        }}>
                    <img src={require('@/static/1.jpg')} alt="" srcset="" />
                    <h1><strong>
                        联系我们
                    </strong>
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default Homeview